var CanvasParticle = (function () {
    function getElementByTag(name) {
        return document.getElementsByTagName(name);
    }
    function getELementById(id) {
        return document.getElementById(id);
    }
    // 根据传入的config初始化画布
    function canvasInit(canvasConfig) {
        canvasConfig = canvasConfig || {};
        var html = getElementByTag("html")[0];
        // 获取body作为背景
        // var body = getElementByTag("body")[0];

        // 获取特定div作为背景
        // mydiv是你想要将其作为背景的div的ID
        var body = document.getElementById("mydiv");
        var canvasObj = document.createElement("canvas");

        var canvas = {
            element: canvasObj,
            points: [],
            // 默认配置
            config: {
                vx: canvasConfig.vx || 4,
                vy: canvasConfig.vy || 4,
                height: canvasConfig.height || 2,
                width: canvasConfig.width || 2,
                count: canvasConfig.count || 100,
                color: canvasConfig.color || "121, 162, 185",
                stroke: canvasConfig.stroke || "130,255,255",
                dist: canvasConfig.dist || 6000,
                e_dist: canvasConfig.e_dist || 20000,
                max_conn: 10,
            },
        };

        // 获取context
        if (canvas.element.getContext("2d")) {
            canvas.context = canvas.element.getContext("2d");
        } else {
            return null;
        }

        body.style.padding = "0";
        body.style.margin = "0";
        // body.replaceChild(canvas.element, canvasDiv);
        body.appendChild(canvas.element);

        canvas.element.style = " top: 0; left: 0; z-index: -1;";
        canvasSize(canvas.element);
        window.onresize = function () {
            canvasSize(canvas.element);
        };
        body.onmousemove = function (e) {
            var event = e || window.event;
            canvas.mouse = {
                x: event.clientX,
                y: event.clientY,
            };
        };
        document.onmouseleave = function () {
            canvas.mouse = undefined;
        };
        setInterval(function () {
            drawPoint(canvas);
        }, 40);
    }

    // 设置canvas大小
    function canvasSize(canvas) {
        // 获取窗口的宽高
        // canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;
        // canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;

        // 获取特定div的宽高
        var width = document.getElementById("mydiv").style.width;
        var height = document.getElementById("mydiv").style.height;
        width = parseInt(width);
        height = parseInt(height);
        canvas.width =
            width ||
            window.innerWeight ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
        canvas.height =
            height ||
            window.innerWeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight;
    }

    // 画点
    function drawPoint(canvas) {
        var context = canvas.context,
            point,
            dist;
        context.clearRect(0, 0, canvas.element.width, canvas.element.height);
        context.beginPath();
        context.fillStyle = "rgb(" + canvas.config.color + ")";
        for (var i = 0, len = canvas.config.count; i < len; i++) {
            if (canvas.points.length != canvas.config.count) {
                // 初始化所有点
                point = {
                    x: Math.floor(Math.random() * canvas.element.width),
                    y: Math.floor(Math.random() * canvas.element.height),
                    vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
                    vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy,
                };
            } else {
                // 处理球的速度和位置，并且做边界处理
                point = borderPoint(canvas.points[i], canvas);
            }
            context.fillRect(
                point.x - canvas.config.width / 2,
                point.y - canvas.config.height / 2,
                canvas.config.width,
                canvas.config.height
            );

            canvas.points[i] = point;
        }
        drawLine(context, canvas, canvas.mouse);
        context.closePath();
    }

    // 边界处理
    function borderPoint(point, canvas) {
        var p = point;
        if (point.x <= 0 || point.x >= canvas.element.width) {
            p.vx = -p.vx;
            p.x += p.vx;
        } else if (point.y <= 0 || point.y >= canvas.element.height) {
            p.vy = -p.vy;
            p.y += p.vy;
        } else {
            p = {
                x: p.x + p.vx,
                y: p.y + p.vy,
                vx: p.vx,
                vy: p.vy,
            };
        }
        return p;
    }

    // 画线
    function drawLine(context, canvas, mouse) {
        context = context || canvas.context;
        for (var i = 0, len = canvas.config.count; i < len; i++) {
            // 初始化最大连接数
            canvas.points[i].max_conn = 0;
            // point to point
            for (var j = 0; j < len; j++) {
                if (i != j) {
                    dist =
                        Math.round(canvas.points[i].x - canvas.points[j].x) *
                        Math.round(canvas.points[i].x - canvas.points[j].x) +
                        Math.round(canvas.points[i].y - canvas.points[j].y) *
                        Math.round(canvas.points[i].y - canvas.points[j].y);
                    // 两点距离小于吸附距离，而且小于最大连接数，则画线
                    if (
                        dist <= canvas.config.dist &&
                        canvas.points[i].max_conn < canvas.config.max_conn
                    ) {
                        canvas.points[i].max_conn++;
                        // 距离越远，线条越细，而且越透明
                        context.lineWidth = 0.5 - dist / canvas.config.dist;
                        context.strokeStyle =
                            "rgba(" +
                            canvas.config.stroke +
                            "," +
                            (1 - dist / canvas.config.dist) +
                            ")";
                        context.beginPath();
                        context.moveTo(canvas.points[i].x, canvas.points[i].y);
                        context.lineTo(canvas.points[j].x, canvas.points[j].y);
                        context.stroke();
                    }
                }
            }
            // 如果鼠标进入画布
            // point to mouse
            if (mouse) {
                dist =
                    Math.round(canvas.points[i].x - mouse.x) *
                    Math.round(canvas.points[i].x - mouse.x) +
                    Math.round(canvas.points[i].y - mouse.y) *
                    Math.round(canvas.points[i].y - mouse.y);
                // 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果
                if (dist > canvas.config.dist && dist <= canvas.config.e_dist) {
                    canvas.points[i].x =
                        canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20;
                    canvas.points[i].y =
                        canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20;
                }
                if (dist <= canvas.config.e_dist) {
                    context.lineWidth = 1;
                    context.strokeStyle =
                        "rgba(" +
                        canvas.config.stroke +
                        "," +
                        (1 - dist / canvas.config.e_dist) +
                        ")";
                    context.beginPath();
                    context.moveTo(canvas.points[i].x, canvas.points[i].y);
                    context.lineTo(mouse.x, mouse.y);
                    context.stroke();
                }
            }
        }
    }
    return canvasInit;
})();




// 渲染楼层
// 定义数据源
let customerData = [
    {
        title: "金融案例",
        enTitle: "Financial Case",
        data: [
            {
                img: "szyh.png",
                name: "苏州银行数据API服务系统",
                desc: "苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。",
            },
            {
                img: "hcfc2.png",
                name: "河北幸福消金三方数据管理平台",
                desc: "河北幸福消费金融股份有限公司是河北省首家批准成立的消费金融公司。公司坚持以“融入互联网生态，融入河北生态，融入股东生态”为主线，打造产品服务、内容服务和能力服务为核心目标，致力于打造一家以技术为驱动、以智慧金融和普惠金融为特色的公众公司。截至2019年底，幸福消金累计投放贷款近500亿元，全年新增270亿元。",
            },
            {
                img: "sznsyh.png",
                name: "苏州农商行数据敏捷共享平台",
                desc: "苏州农商银行是全国第四家A股上市的农商银行，也是银监会成立后在新监管框架下第一批挂牌开业的农村商业银行。近年来，苏州农商银行聚焦主责主业，以支农支小、服务地方经济建设为主要目标，践行了一条符合自身实际的差异化定位、特色化经营之路。在当下金融行业数字化转型的大潮中，苏州农商银行积极探索金融科技转型之道，运用互联网思维，通过智能化和不断迭代的服务，满足不同客户的多元化、个性化需求，实现差异化发展，走出自己的特色化之路。",
            },
        ],
    },
    {
        title: "企业案例",
        enTitle: "business Case",
        data: [
            {
                img: "zhylian.png",
                name: "中国银联便民缴费内容交换平台",
                desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
            },
            {
                img: "zgtxfw.png",
                name: "中通服三方数据管理平台",
                desc: "本项目是建设中国通信服务股份有限公司上海分公司（以下简称“中通服”）的三方数据管理平台，通过智能数据管理平台的线上化系统，进行业务数据的有效管理，规范业务操作流程，防范业务风险，实现资源共享、高效一致的有效运作。",
            },
            {
                img: "airbus.png",
                name: "空客VOOM BI分析系统",
                desc: "Voom 是一个由 Airbus 运营，方便、可靠的直升机订单、运营管理(B2C，B2B)平台，能给有需求的旅客提供便捷、快速的城市直升机服务。本项目涉及Voom的数据仓库和BI工具的建设，服务对象为Voom管理人员和运营人员，为Voom服务的管理决策，和日常运营的精细化改进提供数据支撑。",
            },
        ],
    },
    {
        title: "政务案例",
        enTitle: "Government Case",
        data: [
            {
                img: "scm.png",
                name: "苏城码",
                desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
            },
            {
                img: "sgaj.png",
                name: "大数据防线",
                desc: "华东某市公安局，高度重视智慧公安建设，依托大数据赋能警务实战。并在全国率先提出通过融合多源异构海量数据，进一步提升精准化研判、预判水平。并委托聚合数据帮助其建设智能化平台。",
            },
            {
                img: "szfjg.png",
                name: "市域社会治理",
                desc: "华东某市获批全国首批市域社会治理现代化试点城市，紧密围绕中央、省、市决策部署，立足该市实际，突出问题导向，超前谋划、大胆探索，精准推进政法智能化深度应用，搭建统一集成、高效协同、市域一体的社会治理现代化综合指挥平台。",
            },
        ],
    },
];
// 定义变量保存html结构
// console.log(customerData);
let str='';


// 遍历数据结构，并且破解html结构
customerData.forEach(function(v){
    str+=`
    <div class="floor">
                <h2 class="f18 bold">${v.title} <span class="f9 f14 bold ">/${v.enTitle}</span></h2>

                <!-- 图片和内容 -->
                <ul class="mt15 clearfix">
    `
    v.data.forEach(function(vv){ 
        // let aa=vv.desc.substr(0,120)+'...';
        str+=`
            <li>
                    <img src="./images/${vv.img}" alt="">
                    <h4 class="f14 c18">${vv.name}</h4>
                    <p class="f12 c6">${vv.desc} </p>
                    <a href="#" class="c127 f12">了解详情</a>
                </li>
        `
    })
    str+=`</ul></div>`
})

// console.log(str);
getEle('#floorBox').innerHTML=str;


// 获取dom
let lis=getEles('#returnTop li');
let fBox=getEles('.floor');
lis.forEach(function(v,i){
    // console.log(v);
    v.addEventListener('click',function(){
        window.scrollTo({
            top:fBox[i].offsetTop,
            behavior:'smooth'
        })
    })
})